
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="theme-color" content="#ffffff" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
  <meta http-equiv="mobile-agent" content="format=html5; url=http://spacekid.me/" />

  <title>半色调二维码生成器</title>

  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css" />
  <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.1/animate.min.css" />
  <link rel="stylesheet" href="assets/styles/style.css" />

  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <![endif]-->

</head>

  <body>

    <div id="content-wrapper" class="sidebar-translate">

<header id="intro-wrapper">
  <div class="container">
    <div class="intro-heading">
      <h1 class="intro-title">半色调二维码生成器</h1>
    </div>
  </div>
</header>

<article class="container post entry single narrow-width">
  <div class="entry-content">

    <!-- Content -->

<style>
#drop-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, .5);
  font-size: 5rem;
  color: #fff;
  text-align: center;
}
body.hover #drop-overlay {
  display: block;
}
#canvas-pixel {
  display: none;
}
</style>

<div class="alert alert-info alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>先填写二维码内容，然后将原图拖到本页面，点击生成二维码即可。</strong><br />请使用电脑访问本工具。
</div>

<form>
  <fieldset class="form-group row">
    <label class="col-sm-2 form-control-label" for="input-content">二维码内容</label>
    <div class="col-sm-10">
      <input id="input-content" class="form-control" value="http://weibo.com" onfocus="if (this.value == 'http://weibo.com') {this.value = '';}" />
      <small class="text-muted">输入二维码的编码内容，支持纯文本或 URL，不支持中文</small>
    </div>
  </fieldset>
  <fieldset class="form-group row">
    <label class="col-sm-2 form-control-label">二维码图片</label>
    <div class="col-sm-5">
      <div>
        <canvas id="canvas-image" class="img-thumbnail"></canvas>
        <canvas id="canvas-pixel" class="img-thumbnail"></canvas>
      </div>
      <small class="text-danger">将图片拖到本页面替换此图</small>
    </div>
    <div class="col-sm-5">
      <div>
        <canvas id="canvas-threshold" class="img-thumbnail"></canvas>
      </div>
      <small class="text-muted">阈值预览</small>
    </div>
  </fieldset>
  <fieldset class="row">
    <div class="col-sm-offset-2 col-sm-10">
      <p>
        <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#collapse-advanced" aria-expanded="false" aria-controls="collapseExample">高级选项</button>
      </p>
    </div>
  </fieldset>
</form>
<div class="row">
  <div id="collapse-advanced" class="col-sm-offset-2 col-sm-10 collapse">
    <div class="card card-block">
      <form class="form-inline">
      <fieldset class="form-group">
        <label class="form-control-label" for="select-redundancy">容错率</label>
        <select id="select-redundancy" class="form-control">
          <option value="L">L (7%)</option>
          <option value="M">M (15%)</option>
          <option value="Q" selected>Q (25%)</option>
          <option value="H">H (30%)</option>
        </select>
      </fieldset>
      <fieldset class="form-group">
        <label class="form-control-label" for="select-size">尺寸</label>
        <select id="select-size" class="form-control">
          <option value="0">自动</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5" selected>5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
      </fieldset>
      <fieldset class="form-group">
        <label class="form-control-label" for="select-background">背景</label>
        <select id="select-background" class="form-control">
          <option value="image" selected>使用图片</option>
          <option value="noise">噪点</option>
          <option value="trans">透明</option>
        </select>
      </fieldset>
    </form>
    </div>
  </div>
</div>
<form>
  <fieldset class="form-group row">
    <div class="col-sm-offset-2 col-sm-10">
      <input id="button-generate" class="btn btn-primary btn-lg btn-block" type="button" value="生成二维码" />
    </div>
  </fieldset>
  <hr />
  <fieldset class="form-group row">
    <label class="col-sm-2 form-control-label">生成结果</label>
    <div class="col-sm-10">
      <div>
        <canvas id="canvas-output" class="img-thumbnail"></canvas>
      </div>
      <a id="button-download" class="btn btn-secondary btn-lg btn-block" href="#" download="qrcode.png" target="_blank" title="下载">下载</a>
    </div>
  </fieldset>
</form>
<div id="drop-overlay">
  <p class="super-center">
    放开这张图片
  </p>
</div>

    <!-- End of Content -->

  </div>
</article>

    </div>

    <script src="assets/scripts/halftone-qr-code-generator/halftone.js"></script>
    <script src="assets/scripts/halftone-qr-code-generator/qr-code-generator.js"></script>
    <script src="//cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script src="//cdn.bootcss.com/retina.js/1.3.0/retina.min.js"></script>

  </body>
</html>
